<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="aa">
    <label class="aa1">aaaa</label>
    <label class="aa2">bbb</label>

</div>
<div id="test11" style="border: 1px solid">
    <div>That jerry - built cabin will blow apart in a strong wind.</div>
    <div>那间草草建起的小屋一阵强风就会被吹走的。</div>
</div>
<div>
    <label>sfsl</label>
</div>
</body>
</html>
<style>
    .aa{
        .aa1{
            border: 1px solid #181818;
        }
        .aa2{
            border: 2px solid ;
        }
    }

</style>
<script>
    let theTest11 = document.querySelector('#test11');
    theTest11.addEventListener('mouseenter',function(){
        console.log("mouse enter");
    });

    theTest11.addEventListener('mouseout',function(){
        console.log("mouse out");
    });

</script>